import React from "react";
import { useState } from "react";
import "./TodoHeader.css";

export default function TodoHeader(props) {
  let { addtodo } = props;
  let [title, settitle] = useState("");

  //  获取input 框中的值
  let gettitle = (e) => {
    // console.log(e.target.value);

    settitle(e.target.value);
  };
  let add = (e) => {
    if (e.keyCode === 13 && title.length !== 0) {
      addtodo(title);
      // 清空输入框
      settitle("");
    }
  };

  return (
    <>
      <div className="todo-header">
        <input
          value={title}
          type="text"
          onChange={gettitle}
          onKeyUp={add}
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    </>
  );
}
